<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>simple-websocket-test</title>

    <script type="text/javascript">
        console.info('hello:' + window.location.host);


        function onOpen(data) {
            console.log('===onOpen====')
            console.log(data)
        }

        function onMessage(message) {
            console.info('===onMessage====')

            var contentDiv = document.getElementById("content");
            var pEle = document.createElement("pre");
            var pTextNode = document.createTextNode(message.data + '');

            pEle.appendChild(pTextNode);

            contentDiv.appendChild(pEle);
        }


        function onClose(data) {
            console.log('===onClose====')

            console.log(data)
        }

        function onErr(data) {
            console.log('===onErr====')

            console.log(data)
        }


        var socketServer;
        function connect(hostxxx) {
            close1(socketServer);

            var contentDiv = document.getElementById("content");

            for (var i = 0; i < contentDiv.childNodes.length; i++) {
                var node = contentDiv.childNodes[i];
                contentDiv.removeChild(node);
                node = null;
            }


            var val = document.getElementById("input").value;

            var host = 'ws://' + window.location.host + '/test-websocket/dmxlog/' + val;
            console.log(host);

            if ('WebSocket' in window) {
                socketServer = new WebSocket(host)
            }
            if ('MozWebSocket' in window) {
                socketServer = new MozWebSocket(host);
            }

            if (typeof(socketServer) === undefined) {
                alert('not support');
                return
            }

            console.log(socketServer);

            socketServer.onopen = onOpen;
            socketServer.onmessage = onMessage;
            socketServer.onerror = onErr;
            socketServer.onclose = onClose
        }


        function send() {
            var val = document.getElementById("input").value;
            console.log('send:' + val);
            socketServer.send(val)
        }

        function close1(socketServer) {
            if (socketServer != null) {

                socketServer.close();
                socketServer = null;
                console.log("close socketserver manually")
            }

        }

    </script>

</head>
<body>

<div style="border: 1px solid royalblue; width: auto; background: #CCCCCC">
    <H3>TEST Hello world!!!!</H3>
    <input type="text" id="input" value='dmxLog.action1'>
    <button name="send" style="height: 30px;" onclick="connect(null)">Connect</button>
    <!--<button name="send" style="height: 30px;" onclick="close1()">Close</button>-->
    <div id="content">

    </div>
</div>


</body>
</html>